<template>
  <div id="playercontent">
    <div id="dplayer" @dblclick="fullScreen"></div>
  </div>
</template>

<script>
import Hls from "hls.js";
import DPlayer from "dplayer";
export default {
  props: {
    options: Object,
  },
  data() {
    return {
      qulity: [],
      videoCurrentTime: "",
      duration: "",
      timer: null,
      needScore: false,
      cutid: this.$route.query.cutid,
      isFullScreen: false,
      defaultQ: "2",
      player: null,
      hls: null,
    };
  },

  metgids: {},
  created() {
    
  },
  mounted() {
    this.$nextTick(() => {
      this.initDPlayer();
      this.needScore =
        this.options.need_score_status === true && this.cutid === undefined;
    });
  },
  beforeDestroy() {
    console.log("aaaaa");
    this.hls.destroy();
    this.player.destroy();
  },

  methods: {
    destory() {
      this.hls.destroy();
      this.player.destroy();
    },
    initDPlayer() {
      this.hls = new Hls();
      let that = this;
      const dp = {
        container: document.getElementById("dplayer"),
        //播放器的一些参数
        autoplay: true, //视频自动播放
        theme: "#FADFA3", //主题色
        loop: false, //视频循环播放
        lang: "zh-cn", //语言
        screenshot: true, //开启截图，如果开启，视频和视频封面需要允许跨域
        hotkey: true, //开启热键，支持快进、快退、音量控制、播放暂停
        preload: "auto", //视频预加载，可选值: 'none', 'metadata', 'auto'
        // logo: require('logo.png'),                                     //左上角logo
        volume: 0.7, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
        mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2], //可选的播放速率，可以设置成自定义的数组
        video: {
          //视频信息
          url: that.options.pc_play_url, //视频链接
          type: "customHls", //可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, 见#MSE 支持
          customType: {
            customHls: function (video, player) {
              that.hls.loadSource(video.src);
              that.hls.attachMedia(video);
            },
          },
          pic: "dplayer.png", //视频封面
          // thumbnails: 'thumbnails.jpg',                                //视频缩略图，可以使用 DPlayer-thumbnails (opens new window)生成
          quality: [
            {
              name: "480P",
              url: this.options.pc_play_url,
              type: "customHls",
            },
            {
              name: "720P",
              url: this.options.pc_play_url,
              type: "customHls",
            },
            {
              name: "1080P",
              url: this.options.pc_play_url,
              type: "customHls",
            },
          ],
          defaultQuality: this.defaultQ,
        },
        highlight: this.pointData, //高亮点（打点功能）
      };
      this.player = new DPlayer(dp);
      // 监听播放器事件
      this.player.on("quality_start", () => {
        this.defaultQ = this.player.qualityIndex;
        this.destory();
        this.initDPlayer();
        this.$message.success(
          "切换清晰度成功，如果卡顿请按F5刷新页面后重新切换清晰度"
        );
      });
    },
    showQuality() {
      let qualityAll = [
        //清晰度
        {
          name: "480P",
          url: this.options["480P"],
          type: "customHls",
        },
        {
          name: "720P",
          url: this.options["720P"],
          type: "customHls",
        },
        {
          name: "1080P",
          url: this.options["1080P"],
          type: "customHls",
        },
        {
          name: "原视频",
          url: this.options.pc_play_url,
          type: "customHls",
        },
      ];
      if (this.options["1080P"]) {
        this.qulity.push(qualityAll[2]);
      }
      if (this.options["720P"]) {
        this.qulity.push(qualityAll[1]);
      }
      if (this.options["480P"]) {
        this.qulity.push(qualityAll[0]);
      }
      if (this.qulity.length == 0) {
        this.qulity.push(qualityAll[3]);
      }
    },
    playVideo() {
      this.player.play();
    },
    pauseVideo() {
      this.player.pause();
    },
    fullScreen() {
      if (this.isFullScreen) {
        this.player.fullScreen.cancel("browser");
        this.isFullScreen = false;
      } else {
        this.player.fullScreen.request("browser");
        this.isFullScreen = true;
      }
    },
  },
};
</script>
<style scoped>
#dplayer /deep/ {
  height: 100%;
  /* overflow: visible; */
}

#dplayer /deep/ .dplayer-video-current {
  /* width: auto; */
  height: 100%;
  /* width: 1200px; */
  margin: 0px auto;
}

#dplayer /deep/ .dplayer-video-wrap {
  height: 100%;
  overflow: hidden;
}

#dplayer /deep/ .dplayer-video {
  height: 100%;
}

#playercontent {
  height: 100%;
}

/* dplayer /deep/ .dplayer-video-current {
  width: auto;
  height: 672px;
  margin: 0 auto;
} */
</style>